<!doctype html>
<html lang="en" ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <title>Popover | Onsen UI</title>  
    <link rel="stylesheet" href="../styles/app.css"/>
    <link rel="stylesheet" href="../../build/css/onsenui.css">
    <link rel="stylesheet" href="../../build/css/onsen-css-components.css">

    <script src="../../build/js/angular/angular.js"></script>    
    <script src="../../build/js/onsenui.js"></script>    
    <script src="../app.js"></script>  

    <script>
      app.controller('MyController', function($scope) {
        ons.ready(function() {
          ons.createPopover('popover.html').then(function(popover) {
            $scope.popover = popover;
          });
        });

        $scope.show = function(e) {
          $scope.popover.show(e);
        }
      });
    </script>

  </head>

  <body ng-controller="MyController">    
    <ons-page>
    <div class="navigation-bar">
      <div class="navigation-bar__left">
        <span id="navigation" ng-click="show('#navigation')" class="toolbar-button--outline navigation-bar__line-height">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>

      <div class="navigation-bar__center">
        Popover demo! 
      </div>

      <div class="navigation-bar__right">
        <span id="top-right" ng-click="show('#top-right')" class="toolbar-button--outline navigation-bar__line-height">Button</span>
      </div>
    </div>

    <div style="text-align: center">
      <br />
      <br />
      <ons-button id="button" ng-click="show('#button')">Click me!</ons-button>
    </div>

    <div class="tab-bar">
      <label ng-click="show('#stop')" class="tab-bar__item">
        <input type="radio" name="tab-bar-b" checked="checked">
        <button id="stop" class="tab-bar__button">
          <i class="tab-bar__icon ion-stop"></i>
        </button>
      </label>

      <label ng-click="show('#record')" class="tab-bar__item">
        <input type="radio" name="tab-bar-b">
        <button id="record" class="tab-bar__button">
          <i class="tab-bar__icon ion-record"></i>
        </button>
      </label>

      <label ng-click="show('#star')" class="tab-bar__item">
        <input type="radio" name="tab-bar-b">
        <button id="star" class="tab-bar__button">
          <i class="tab-bar__icon ion-star"></i>
        </button>
      </label>

      <label ng-click="show('#cloud')" class="tab-bar__item">
        <input type="radio" name="tab-bar-b">
        <button id="cloud" class="tab-bar__button">
          <i class="tab-bar__icon ion-ios7-cloud-outline"></i>
        </button>
      </label>

      <label ng-click="show('#pie')" class="tab-bar__item">
        <input type="radio" name="tab-bar-b">
        <button id="pie" class="tab-bar__button">
          <i class="tab-bar__icon ion-ios7-pie"></i>
        </button>
      </label>
    </div> 
    </ons-page>

    <script type="text/ons-template" id="popover.html">
      <ons-popover direction="up down" cancelable>
      <div style="text-align: center; opacity: 0.5;">
        <p>This is a popover!</p>
        <p><small>Click the background to remove the popover.</small></p>
      </div>
      </ons-popover>
    </script>

  </body>
</html>
